<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My Account - Premium Multipurpose HTML5/CSS3 Theme</title>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- FAVICONS -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/icons/apple-touch-icon-144-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" th:href="@{/icons/apple-touch-icon-114-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/icons/apple-touch-icon-72-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{/icons/apple-touch-icon-57-precomposed.png}"/>
    <link rel="shortcut icon" th:href="@{/icons/favicon.png}"/>

    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{/css/slick-1.6.0/slick.css}"/>

    <link rel="stylesheet" th:href="@{/css/jquery.fancybox.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-compare/colorbox.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/js_composer/js_composer.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-layout.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-smallscreen.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-wishlist/style.css}"/>


    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/app-orange.css}" id="theme_color"/>
    <link rel="stylesheet" href="" id="rtl"/>
    <link rel="stylesheet" th:href="@{/css/app-responsive.css}"/>
</head>

<body class="page woocommerce-account woocommerce-page woocommerce-orders">
<div class="body-wrapper theme-clearfix">
    <header id="header" class="header header-style1">

        <div class="widget pull-left" style="margin-left: 300px">
            <div class="widget-inner">
                <div id="lang_sel">
                    <ul class="nav">
                        <li>
                            <a class="lang_sel_sel">
                                <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}" width="18"
                                     height="12"/> English
                            </a>
                            <ul>
                                <li>
                                    <a th:href="@{/order(l='en_US')}">
                                        <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}"
                                             width="18" height="12"/> English
                                    </a>
                                </li>

                                <li>
                                    <a th:href="@{/order(l='zh_CN')}">
                                        <img class="iclflag" title="中文" alt="ar" th:src="@{images/icons/ar.png}"
                                             width="18" height="12"/> 中文
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

        <div th:replace="commons/bar::#bottom"></div>
    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">
                <h1 th:text="#{myaccount}">My Account</h1>
                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li>
                                    <a href="index.html" th:text="#{home}">Home</a>
                                    <span class="go-page"></span>
                                </li>

                                <li class="active">
                                    <span th:text="#{myaccount}">My account</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents" role="main" class="main-page  col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="post-6 page type-page status-publish hentry">
                    <div class="entry">
                        <div class="entry-content">
                            <header>
                                <h2 class="entry-title" th:text="#{myaccount}">My Account</h2>
                            </header>

                            <div class="entry-content">
                                <div class="woocommerce">
                                    <div th:replace="commons/account::#side (actUrl='order')"></div>

                                    <div class="woocommerce-MyAccount-content">
                                        <table class="shop_table shop_table_responsive my_account_orders account-orders-table">
                                            <thead>
                                            <tr>
                                                <th class="order-number"><span class="nobr">[[#{ordernumber}]]</span>
                                                </th>
                                                <th class="order-date"><span class="nobr">[[#{orderdate}]]</span></th>
                                                <th class="order-status"><span class="nobr">[[#{orderstatu}]]</span>
                                                </th>
                                                <th class="order-total"><span class="nobr">[[#{subtotal}]]</span></th>
                                                <th class="order-actions"><span class="nobr">&nbsp;</span></th>
                                            </tr>
                                            </thead>

                                            <tbody>
                                            <!--我的订单-->
                                            <tr th:if="${session.orderList!=null}" class="order"
                                                th:each="order:${session.orderList}">
                                                <!--订单号-->
                                                <td class="order-number" th:data-title="#{ordernumber}"
                                                    th:if="${order.state != 4}">
                                                    <a th:href="@{/orderdetails/}+${order.oid}"><span
                                                            th:text="${order.oid}"></span> </a>
                                                </td>
                                                <!--订单日期-->
                                                <td class="order-date" th:data-title="#{orderdate}"
                                                    th:if="${order.state != 4}">
                                                    <span th:text="${#dates.format(order.ordertime,'yyyy-MM-dd hh:mm:ss')}"></span>
                                                </td>
                                                <!--订单状态
                                                    int ORDER_UNPAY=0;//未付款
                                                    int ORDER_PAYED=1;//已付款
                                                    int ORDER_SEND=2;//已发货
                                                    int ORDER_FINISHI=3;//已完成
                                                    int ORDER_DELETE =4 用户已删除-->
                                                <td class="order-status" th:data-title="#{orderstatu}"
                                                    th:if="${order.state != 4}">
                                                    <span th:if="${order.state == 0}" th:text="未付款"></span>
                                                    <span th:if="${order.state == 1}" th:text="等待发货"></span>
                                                    <span th:if="${order.state == 2}" th:text="等待收货"></span>
                                                    <span th:if="${order.state == 3}" th:text="订单已完成"></span>
                                                </td>
                                                <!--订单总额-->
                                                <td class="order-total" th:data-title="#{subtotal}"
                                                    th:if="${order.state != 4}">
                                                    <span th:text="${order.total}"></span>
                                                </td>
                                                <!--订单操作-->
                                                <td class="order-actions" data-title="&nbsp;"
                                                    th:if="${order.state != 4}">
                                                    <a th:href="@{/orderdetails/}+${order.oid}" class="button view">[[#{orderview}]]</a>
                                                    <a th:href="'/checkout/'+${order.oid}" th:if="${order.state == 0}"
                                                       class="button view">去支付</a>
                                                    <a th:href="'/dealer/get?oid='+${order.oid}"
                                                       th:if="${order.state == 2}" class="button view">确认收货</a>

                                                    <header class="woocommerce-Address-title title "
                                                            th:if="${order.state == 3}">
                                                        <button class="edit"
                                                                data-th-attr="onclick='deleteItem(this,\''+${order.oid}+'\')'">
                                                            删除
                                                        </button>
                                                    </header>
                                                </td>

                                            </tr>
                                            <tr th:if="${session.orderList	==null}">
                                                你还有没有任何订单！
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- DIALOGS -->
    <div th:replace="commons/bar::#login_form"></div>

    <a id="etrostore-totop" href="#"></a>

    <script type="text/javascript" th:src="@{js/jquery/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery/jquery-migrate.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{js/jquery/js.cookie.min.js}"></script>

    <!-- OPEN LIBS JS -->
    <script type="text/javascript" th:src="@{js/owl-carousel/owl.carousel.min.js}"></script>
    <script type="text/javascript" th:src="@{js/slick-1.6.0/slick.min.js}"></script>

    <script type="text/javascript" th:src="@{js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
    <script type="text/javascript" th:src="@{js/isotope/isotope.js}"></script>
    <script type="text/javascript" th:src="@{js/fancybox/jquery.fancybox.pack.js}"></script>
    <script type="text/javascript" th:src="@{js/sw_woocommerce/category-ajax.js}"></script>
    <script type="text/javascript" th:src="@{js/sw_woocommerce/jquery.countdown.min.js}"></script>
    <script type="text/javascript" th:src="@{js/js_composer/js_composer_front.min.js}"></script>

    <script type="text/javascript" th:src="@{js/plugins.js}"></script>
    <script type="text/javascript" th:src="@{js/megamenu.min.js}"></script>
    <script type="text/javascript" th:src="@{js/main.min.js}"></script>

    <script type="text/javascript">
        var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
        var sticky_navigation = function () {
            var scroll_top = $(window).scrollTop();
            if (scroll_top > sticky_navigation_offset_top) {
                $("#header .header-bottom").addClass("sticky-menu");
                $("#header .header-bottom").css({"top": 0, "left": 0, "right": 0});
            } else {
                $("#header .header-bottom").removeClass("sticky-menu");
            }
        };
        sticky_navigation();
        $(window).scroll(function () {
            sticky_navigation();
        });

        function deleteItem(elem, id) {
            $.ajax({
                url: '/order/delete?oid=' + id,
                type: 'get',
                success: function (data) {
                    // alert('success')
                    $(elem).parent().parent().parent().remove()
                },
                fail: function (data) {
                    console.log('fail')
                }
            })
        };


        // $(function () {
        // 	$(".title").on('click','button',function () {
        //
        // 		$(this).parent().parent().parent().hide();
        //     })
        // })
        $(document).ready(function () {
            $(".show-dropdown").each(function () {
                $(this).on("click", function () {
                    $(this).toggleClass("show");
                    var $element = $(this).parent().find("> ul");
                    $element.toggle(300);
                });
            });
        });
    </script>

</body>
</html>